﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页1</title>
    <style>
        body{overflow:scroll; background-color: rgba(220, 220, 220,0.5);}
        div{background-color: rgba(190, 140, 90,0.4);width:1400px;height:76px;}

        a{font-size:140%;float:right;}
        a:link{color: #111111;text-decoration:none;}	/* 未访问的链接 */
        a:visited {color: #eeeeee;text-decoration:none;}
        a:hover {color: rgba(200 ,76 ,108,0.4);text-decoration:none;}	/* 鼠标移动到链接上 */
        a:active {color:rgb(160,130,120);text-decoration:none;}	/* 选定的链接 */

        img{width:200px;height:135px;}
        span{position: absolute;font-size:30px;top:45px;left:40px;}
        .comm-list-cont{position: relative;top:-186px;}
        .rw{color:rgb(60,130,120);width:950px;height:200px;position:relative;left:300px;top:-180px;}
        .comm-list-item:hover{
            background-color: rgba(230 ,228,192,0.3);
        }

        .jdt{  background-color:rgba(50,100,90,0.5);width:200px;height:10px;border-radius: 10px; position: relative;top:15px;}
        .jd{position: relative;top:3px;left:5px; background-color:rgba(150,220,110,0.9);height:4px;}

        .lv{color: rgba(255,255,255,0.9);position:relative;top:10px;left:5px;font-size:22px;}
        .sm{color: rgba(255,255,255,0.9);position:relative;top:10px;left:100px;font-size:22px;}


        .comm-list-item{position:relative;margin-top:95px;border:solid 10px rgba(160,120,120,0.4);width:200px;height:200px;}
    </style>


</head>
<body><div><h1 style="position:relative;top:10px;left:15px;">学习任务智能规划系统</h1>
    <div class="c"><b><a href="/更多模块.html">更多模块&nbsp;</a>
        <a href="/错题集.html">错题集&nbsp;</a>
        <a href="/首页1.html">首页&nbsp;</a>
    </b></div>
</div>
<div class="block" style="padding:0;">
    <div id="banner">
        <div class="container">
            <div class="banner">
                <div class="wrapper">

                </div>
            </div>
        </div>
    </div>
</div>





<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>

<script>

    $(document).ready(function(){
    
    

        $.ajax({

            //请求方式

            type:"GET",

            //文件位置

            url:"/api?fid=jindu",

            //返回数据格式为json,也可以是其他格式如

            dataType: "json",

            //请求成功后要执行的函数，拼接html

            success:function(data){
            
               
               
                var str="";

                $.each(data.data,function(i,n){



                    str+="<div class=\"comm-list-item\"><img src=\"2345截图20190121001828.png\"><span class=\"kc\"><strong>"+n.name+"</strong></span>"+"<span class=\"lv\"><b>"+"Lv."+parseInt((n.bingo+n.error)/2)+"</b></span>"+"<span class=\"sm\"><b>"+(n.bingo+n.error)+"/"+n.count+"</b></span><div class=\"jdt\"><div class=\"jd\" style=\"width:100px;\"></div></div><div class=\"rw\"><ul><li><a href=\"http://localhost/%E7%AD%94%E9%A2%98%E7%95%8C%E9%9D%A2.html?kid="+n.kid+"\" target=\"答题\" class=\"mr\">每日一练环节</a></li><li><a href=\"http://localhost/%E7%AD%94%E9%A2%98%E7%95%8C%E9%9D%A2.html?kid="+n.kid+"\" target=\"_blank\">小试身手环节</a></li><li><a href=\"http://localhost/%E7%AD%94%E9%A2%98%E7%95%8C%E9%9D%A2.html?kid="+n.kid+"\" target=\"_blank\">真题演练环节</a></li></ul></div><div class=\"comm-list-cont\"><a href=\"#\"></a><div class=\"\"><p></p><div><button class=\"remove\" style=\"float:right;\">删除Div</button></div></div></div></div>";

                 
                   
                    
                });

                   
 
                    
                $("body").append(str);
                
               $.each(data.data,function(i,n){

                    
                    alert($(".jd").css("width"));
                
                    $(".jd:eq("+i+")").width((n.bingo+n.error)/n.count*190);
                   
                   
                   
                  
                    
                });
                
                
                $.each(data.data,function(i,n){

                                 
                    $(".remove:eq("+i+")").click(function(){
                
                    $(".comm-list-item:eq("+i+")").remove();
                 

                  
                  
                    
                });
                
               
                
                });
               
            }

        });
        

    });


</script>

</body>
</html>